<html>
<head>
    <script type="text/javascript">

    // game settings
    var seconds 	// time 

    // variables
    var countDown
    var number
    var nbDigits
    var score
    var t
    var game_state  // START; FINISH

    // HTML Elements
    var txtNumber
    var lblNumber
    var lblScore
    var lblTimer
    var btnStart
    var imgResult
    
    var debug = 0
    var mutex = 0

    function Initialize() {
      txtNumber = document.getElementById('txtNumber')
      lblNumber = document.getElementById('lblNumber')
      lblScore  = document.getElementById('lblScore')
      lblTimer  = document.getElementById('lblTimer')
      btnStart  = document.getElementById('btnStart')
      imgResult = document.getElementById('imgResult')
      seconds = 60
      countDown = 0
      number = 0
	    nbDigits = 1
	    score = 0
	    t = 0
	    txtNumber.value 	   = ''
	    lblNumber.style.visibility ='visible'
	    lblScore.style.visibility = 'hidden'
	    game_state = 'START'
      imgResult.style.visibility = 'hidden'   
      mutex = 0  
    }

    // Start counting down
    function StartCountDown() {
	
      lblTimer.innerHTML = seconds
      seconds = seconds - 1
  
      if (seconds > -1)
		    countDown = setTimeout("StartCountDown()", 1000)
      else {
	     EndGame()
	     clearTimeout(countDown)
      }
    }

    function GenerateNumber() {
      txtNumber.value    = ''
      txtNumber.disabled = true
      imgResult.style.visibility = 'hidden'
      str_number = String(Math.floor(Math.random() * 100000000000000)).substring(0,nbDigits)
	    lblNumber.innerHTML = str_number
    	t = setTimeout("ClearNumber()", 500)
    }
	
    function ClearNumber() {
      lblNumber.style.visibility ='hidden'
      txtNumber.disabled = false
	    txtNumber.focus()
	    clearTimeout(t)
    }

    // Compares the generated number and the number entered by the user to check
    // if the numbers are equal so far.	
    function CompareNumbers() {
	     
	    
      if (mutex > 1)
        return
      mutext = mutex + 1
      var str_txtNumber = txtNumber.value
	     
	    
	   
      if (str_number.substring(0, str_txtNumber.length) != str_txtNumber) {
        txtNumber.disabled = true
		    GetNumberOfDigits('false')
		    lblNumber.style.visibility ='visible'
		    imgResult.src = "graph/wrong.gif"
		    imgResult.style.visibility = 'visible'
		    t = setTimeout("GenerateNumber()", 500)
      }
      else if (str_number == str_txtNumber) {
              txtNumber.disabled = true
              AddPoints()
              GetNumberOfDigits('true')
              lblNumber.style.visibility ='visible'
              imgResult.src = "graph/right.gif"
              imgResult.style.visibility = 'visible'
              t = setTimeout("GenerateNumber()", 500)
      }
      mutex = mutex - 1
    }
   
    function ClearAnswer() {
      txtNumber.value    = ''
      clearTimeout(t)
      return t
    }
    
    // Add points based on number of digits
    function AddPoints() {
      score = score + nbDigits
      UpdateDebugEnvironment()
	  }
     	
    function GetNumberOfDigits(isCorrect) {
    	if (isCorrect == 'true') {
    		nbDigits = nbDigits + 1
    	}
    	else {
    		if (nbDigits > 1) {
    			nbDigits = nbDigits - 1
    		}
    	}
    	UpdateDebugEnvironment()
    }

    function OnCellClick( cell ) {
      if (game_state == 'START') {
        var cellId = cell.id;
        if (!txtNumber.disabled) {
          txtNumber.value = txtNumber.value + cellId
          CompareNumbers()
        }
      }
		}

    function EndGame() {
    	lblScore.innerHTML	  = score
    	lblScore.style.visibility = 'visible'
    	btnStart.focus()
    	game_state = 'FINISH'
    	UpdateDebugEnvironment()
    }
    
    function UpdateDebugEnvironment() {
      document.getElementById('de_scoreValue').innerHTML =  score
      document.getElementById('de_nbDigitsValue').innerHTML = nbDigits
    }
</script>
</head>

<body>
<table border="1">
  <tr style="align:right">
    <td>
      Score: <input id="btnStart" type="button" onclick="Initialize();GenerateNumber();StartCountDown()" value="Start">
    </td>
    <td><font size="5" color="green"><span id="lblScore" style="visibility:hidden">&nbsp;</span></font></td>
    <td><span id="lblTimer">60</span></td>
  </tr>
  <tr style="text-align: center">
    <td colspan="3">
      <font size="5"><span id="lblNumber" style="visibility:visible">&nbsp;</span></font>
    </td>
  </tr>
  <tr style="align:right">
    <td colspan="2">
      <input id="txtNumber" type="text" name="txtNumber" onkeyup="CompareNumbers()">
    </td>
    <td><img id="imgResult" src="graph\right.gif" style="visibility:hidden"/></td>

  </tr>
  <tr>
    <td colspan="3">
      <span id="lblResult" style="visibility:hidden"></span>
      <table id="tblGrid" border="1" cellpadding="0" cellspacing="0" style="BORDER-COLLAPSE: collapse"
  					bordercolor="#111111" width="200" height="200">
  	<TBODY>
  		<tr>
  			<td class="grid" id="7" onclick="OnCellClick(this)" width="20" height="20" align="middle">7</td>
  			<td class="grid" id="8" onclick="OnCellClick(this)" width="20" height="20" align="middle">8</td>
  			<td class="grid" id="9" onclick="OnCellClick(this)" width="20" height="20" align="middle">9</td>
  		</tr>
  		<tr>
  			<td class="grid" id="4" onclick="OnCellClick(this)" width="20" height="20" align="middle">4</td>
  
  			<td class="grid" id="5" onclick="OnCellClick(this)" width="20" height="20" align="middle">5</td>
  			<td class="grid" id="6" onclick="OnCellClick(this)" width="20" height="20" align="middle">6</td>
  		</tr>
  		<tr>
  			<td class="grid" id="1" onclick="OnCellClick(this)" width="20" height="20" align="middle">1</td>
  			<td class="grid" id="2" onclick="OnCellClick(this)" width="20" height="20" align="middle">2</td>
  			<td class="grid" id="3" onclick="OnCellClick(this)" width="20" height="20" align="middle">3</td>
  		</tr>
  		<tr>
  			<td class="grid" id="0" colspan="2"onclick="OnCellClick(this)" width="20" height="20" align="middle">0</td>
  			<td class="grid" id="cell1" onclick="OnCellClick(this)" width="20" height="20" align="middle"></td>
  		</tr>
  		
  	</TBODY>
  </table>
</td></tr>
</table>
<div id="DebugEnv" style="visibility: hidden">

<table>
<tr><td colspan="2">Debug Environment - Watch</td></tr>
<tr>
<td>Variable name</td><td>Value</td></tr>
<tr>
<td>nbDigits</td><td  id="de_nbDigitsValue"></td>
</tr>
<tr>
<td>Score</td><td  id="de_scoreValue"></td>
</tr>
</table>
</div>

</body>

</html>
